<template>
  <div class="app-container">
    <el-tabs class="esc" type="card" v-model="activeName">
      <el-tab-pane label="官网配置" name="first">
        <el-container class="lcmes">
          <el-main class="innerBox">
            <el-card class="box-card">
              <div class="box1">
                <div class="tits">上传logo</div>
                <div class="imgBox">
                  <img src="../../../public/icons/image.png" alt="" />
                </div>
              </div>
              <div class="box1">
                <div class="olis">
                  <span class="gsmc">公司名称：</span>
                  <input v-model="input1" class="radiusInp" />
                </div>
                <div class="olis">
                  <span class="gsmc">公司地址：</span>
                  <input v-model="input2" class="radiusInp" />
                </div>
                <div class="olis">
                  <span class="gsmc">公司电话 ：</span>
                  <input v-model="input3" class="radiusInp" />
                </div>
                <div class="olis">
                  <span class="gsmc">公司：</span>
                  <input v-model="input4" class="radiusInp" />
                </div>
              </div>
              <div class="box1 boxs">
                <div class="olis">
                  <span class="gsmc">公众号名称：</span>
                  <input v-model="input5" class="radiusInp" />
                </div>
                <div class="oliss">
                  <span class="gsmc">公众号二维码</span>
                  <div class="imgBox">
                    <img src="../../../public/icons/image.png" alt="" />
                  </div>
                </div>
              </div>
            </el-card>
          </el-main>
          <el-row>
            <el-button plain class="yl">预览</el-button>
            <el-button plain class="sm" @click="onBtns">提交</el-button>

            <el-dialog
              title="提示"
              :visible.sync="centerDialogVisible"
              width="30%"
              :center="true"
            >
              <!-- <span></span> -->
              <h1 class="tj">提交成功</h1>
              <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false"
                  >取 消</el-button
                >
                <el-button type="primary" @click="centerDialogVisible = false"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </el-row>
        </el-container>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import { putArr2 } from '../../request/api/putArr2';
import { getArr } from '../../../src/request/api/getArr'
import { postArr } from '../../../src/request/api/postArr'

export default {
    data() {
        return {
            imageUrls: '',

            activeName: "first",
            tableData: [],
            centerDialogVisible: false
        };
    },
    methods: {
        handleAvatarSuccess(res, file) {
            console.log('aaaa', res.data[0].id, file);
            this.imageId = res.data[0].id;
            this.imageUrls = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";

            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            } else {
                this.$message.success("图片上传成功！");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
        //获取接口
        async getList() {
            let res = await getArr('/admin/web-config/getWebConfig')
            console.log('goods', res);
            return res
        },

        onBtns() {
            this.centerDialogVisible = true
        },
        async buttons() {
            let res2 = await postArr('/admin/web-config/upWebConfig', {

                "companyAddress": "",
                "companyEmail": "",
                "companyName": "",
                "companyPhone": "",
                "createBy": "",
                "createTime": "",
                "id": 0,
                "imgCodeId": 0,
                "imgId": 0,
                "isDelete": 0,
                "status": 0,
                "updateBy": "",
                "updateTime": "",
                "wxCode": ""

            })
            console.log('set', res2);
            return res2
        }
    
  },
  created() {
    this.getList();
    this.buttons();
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader {
    width: 180px !important;
    height: 160px;

    :deep .el-upload {
        width: 180px !important;
        height: 160px;
        border: 1px dashed #8c939d;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 120px;
            height: 60px;
            line-height: 160px;
            text-align: center;
            background-color: #f6f8fb;
        }
    }
}

.aaa {
    margin-right: 100px;
}

:deep .avatar-uploader {
    background: #F6F8FB;

}

.app-container .lcmes .headBox .headRit .toPic .avatar-uploader[data-v-6eae75c2] .el-upload .avatar-uploader-icon {
    background: #F6F8FB;

}

.el-upload el-upload--text {
    background: #F6F8FB;

}

:deep .el-main[data-v-7eb2bc79] {
  padding-top: 0 !important;
  line-height: 0 !important;
}


:deep .el-upload-text {
    z-index: 999;
    background: #F6F8FB;

}

:deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

* {
  padding: 0;
  margin: 0;
}

.tj {
  margin: 0 auto;
}

.app-container {
  height: 100vh;
  /* 使容器高度占满整个视口 */

  .lcmes {
    height: 100%;
    display: block;

    .innerBox {
      margin-bottom: 40px;

      .box-card {
        // display: flex;
        padding-bottom: 220px;

        .box1 {
          width: 290px;
          height: 260px;
          float: left;
          margin-right: 60px;
          // background-color: #eee;

          .tits {
            width: 80px;
            height: 24px;
            font-size: 14px;
            margin-top: 20px;
          }

          .imgBox {
            width: 160px;
            height: 160px;
            background: #f6f8fb;

            img {
              width: 30px;
              height: 30px;
              margin-top: 65px;
            }
          }

          .olis {
            width: 100%;
            display: flex;
            justify-content: space-between;
            height: 30px;
            margin-bottom: 20px;
            margin-top: 10px;

            .gsmc {
              text-align: left;
              width: 90px;
              height: 30px;
              line-height: 30px;
              font-size: 14px;
              // margin-top: 20px;
            }

            .radiusInp {
              width: 200px;
              height: 30px;
              outline: none;
              border: 1px solid #eceef5;
              background-color: #f6f8fb;
              border-radius: 10px;
              padding-left: 10px;
            }
          }

          .oliss {
            width: 100%;
            display: flex;
            justify-content: space-between;

            .gsmc {
              text-align: left;
              width: 90px;
              height: 30px;
              line-height: 30px;
              font-size: 14px;
              // margin-top: 20px;
            }

            .imgBox {
              width: 200px;
              height: 200px;
              background: #f6f8fb;

              img {
                width: 30px;
                height: 30px;
                margin-top: 80px;
              }
            }
          }
        }

        .boxs {
          margin-left: 50px;
        }
      }
    }
  }
}

:deep .el-tabs__item {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: #fff;
  margin-right: 20px;
}

:deep .el-tabs__item.is-active {
  background-color: #2567ff;
  color: #fff;
}

> :deep .el-tabs__header {
  margin: 0 !important;
  // padding-left: 20px;
  box-sizing: border-box;
  width: 1670px;
  // height: 60px;
  margin-left: 20px;
  border-bottom: 0 !important;
}

:deep .el-textarea__inner {
  background-color: #f6f8fb;
}

.yl {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-right: 25px;
}

.sm {
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  background-color: #2567ff;
}
</style>